$(function() {

    //轮播调用
    $(document).ready(function(e) {
        $('.lb-container').unslider({
            dots: true
        });
    });

    $(document).ready(function(e) {
        var unslider04 = $('.lb-banner').unslider({
                dots: true
            }),
            data04 = unslider04.data('unslider');
        $('.unslider-arrow04').click(function() {
            var fn = this.className.split(' ')[1];
            data04[fn]();
        });
    });

    //赋值第一屏的宽度
    var main1ht = $(".main-1").height();
    //赋值第二屏的宽度
    var main2ht = $(".main-2").height();
    //赋值第三屏的宽度
    var main3ht = $(".main-3").height();
    //赋值第四屏的宽度
    var main4ht = $(".main-4").height();
    //赋值第五屏的宽度
    var main5ht = $(".main-5").height();

    $(window).scroll(function(e) {
        s = $(document).scrollTop();
        if (s > main1ht - 50) {
            $(".main-1-tit").animate({
                opacity: '1',
                top: '98px'
            }, 800);
            $(".main-1-cent .left").animate({
                opacity: '1',
                left: '-551px'
            }, 800);
            $(".main-1-cent .right").animate({
                opacity: '1',
                left: '580px'
            }, 800);
            $(".main-1-cent .button").animate({
                opacity: '1',
                left: '-30px'
            }, 800);
        }
        if (s > main2ht + 300) {
            $(".main-2-view .left").animate({
                opacity: '1',
                left: '0px'
            }, 800);
            $(".main-2-view .lb-container").animate({
                opacity: '1',
                top: '-140px'
            }, 800);
            $(".main-2-view .button").animate({
                opacity: '1',
                top: '545px'
            }, 800);
        }
        if (s > main3ht + 900) {
            $(".main-3 .main-3-tit").animate({
                opacity: '1',
                top: '99px'
            }, 800);
        }
        if (s > main3ht + 1100) {
            $(".main-3-cent .left").animate({
                opacity: '1',
                left: '0px'
            }, 800);
            $(".main-3-cent .right").animate({
                opacity: '1',
                left: '669px'
            }, 800);
        }
        if (s > main4ht + 1700) {
            $(".main-4-tit").animate({
                opacity: '1',
                top: '92px'
            }, 800);
            $(".main-4 .lb-container").animate({
                opacity: '1',
                top: '199px'
            }, 800);
            $(".main-4 .button").delay(500).animate({
                opacity: '1',
                top: '392px'
            }, 800);
        }
        if (s > main4ht + 2800) {
            $(".main-4 .button").delay(2800).animate({
                opacity: '1',
                top: '392px'
            });
        }
        if (s > main5ht + 2800) {
            $(".main-5 .main-5-view").animate({
                opacity: '1',
                top: '134px'
            });
        }
        if (s > main5ht + 2900) {
            $(".main-5 .button").animate({
                opacity: '1',
                top: '378px'
            });
        }
    })
    $(".main-1 .button").hover(function() {
        $(this).find(".button-view-no").stop().animate({
            top: '-35px'
        }, 300)
        $(this).find(".button-view-on").stop().animate({
            top: '0px'
        }, 300)
    }, function() {
        $(this).find(".button-view-no").stop().animate({
            top: '0px'
        })
        $(this).find(".button-view-on").stop().animate({
            top: '35px'
        })
    })
    $(".main-2 .button").hover(function() {
        $(this).find(".button-view-no").stop().animate({
            top: '-35px'
        }, 300)
        $(this).find(".button-view-on").stop().animate({
            top: '0px'
        }, 300)
    }, function() {
        $(this).find(".button-view-no").stop().animate({
            top: '0px'
        })
        $(this).find(".button-view-on").stop().animate({
            top: '35px'
        })
    })
    $(".main-3-cent .left").hover(function() {
        $(this).find(".left-foot").stop().animate({
            left: '10px'
        });
        $(this).find(".button-view-no").stop().animate({
            top: '-35px'
        }, 300)
        $(this).find(".button-view-on").stop().animate({
            top: '0px'
        }, 300)
    }, function() {
        $(this).find(".left-foot").stop().animate({
            left: '0px'
        })
        $(this).find(".button-view-no").stop().animate({
            top: '0px'
        })
        $(this).find(".button-view-on").stop().animate({
            top: '35px'
        })
    })
    $(".main-3-cent .tit-view").hover(function() {
        $(this).stop().animate({
            left: '10px'
        });
    }, function() {
        $(this).stop().animate({
            left: '0px'
        })
    })
    $(".main-3-cent .cent").hover(function() {
        $(this).stop().animate({
            left: '10px'
        });
    }, function() {
        $(this).stop().animate({
            left: '0px'
        })
    })
    $(".main-3-cent .right .button").hover(function() {
        $(this).find(".button-view-no").stop().animate({
            left: '69px'
        })
        $(this).find(".button-view-on").stop().animate({
            left: '153px'
        })
    }, function() {
        $(this).find(".button-view-no").stop().animate({
            left: '79px'
        })
        $(this).find(".button-view-on").stop().animate({
            left: '143px'
        })
    })
    $(".main-4 .main-4-product").hover(function() {
        $(this).find(".product-cent-1").stop().show();
        $(this).find(".product-cent-2").stop().animate({
            top: '0px'
        }, 700)
        $(this).find(".product-foot").css({
            "border-bottom-style": "solid",
            "border-color": "#252525",
            "border-width": "1px"
        })
        $(this).find(".into").stop().animate({
            opacity: '1',
            left: '309px'
        })
        $(this).find("img").stop().animate({
            width: '110%',
            left: '-15px'
        })
    }, function() {
        $(this).find(".product-cent-1").stop().delay(450).hide(0);
        $(this).find(".product-cent-2").stop().animate({
            top: '-240px'
        }, 500)
        $(this).find(".product-foot").css("border", "none");
        $(this).find(".into").stop().animate({
            opacity: '0',
            left: '285px'
        })
        $(this).find("img").stop().animate({
            width: '100%',
            left: '0px'
        })
    })
    $(".main-4 .button").hover(function() {
        $(this).find(".button-view-no").stop().animate({
            left: '133px'
        })
        $(this).find(".button-view-on").stop().animate({
            left: '219px'
        })
    }, function() {
        $(this).find(".button-view-no").stop().animate({
            left: '143px'
        })
        $(this).find(".button-view-on").stop().animate({
            left: '209px'
        })
    })

    //赋值姓名

    var name = $(".input-1 .input-name");

    //赋值邮箱

    var mailbox = $(".input-1 .input-mailbox");

    //赋值电话

    var telephone = $(".input-1 .input-telephone");

    //赋值内容

    var content = $(".input-2 .input-content");

    //名字焦点

    name.focus(function() {
        if (name.val() == "姓名") {
            $(this).val("");
        } else if (name.val() == '') {
            $(this).val("姓名");
        }
        $(this).css("border-bottom-color", "#484848");
    })
    name.blur(function() {
        if (name.val() == '') {
            $(this).val("姓名");
        }
        $(this).css("border-bottom-color", "#252525");
    })

    //邮箱焦点

    mailbox.focus(function() {
        if (mailbox.val() == "邮箱") {
            $(this).val("");
        } else if (mailbox.val() == '') {
            $(this).val("邮箱");
        }
        $(this).css("border-bottom-color", "#484848");
    })
    mailbox.blur(function() {
        if (mailbox.val() == '') {
            $(this).val("邮箱");
        }
        $(this).css("border-bottom-color", "#252525");
    })

    //电话焦点

    telephone.focus(function() {
        if (telephone.val() == "电话") {
            $(this).val("");
        } else if (telephone.val() == '') {
            $(this).val("电话");
        }
        $(this).css("border-bottom-color", "#484848");
    })
    telephone.blur(function() {
        if (telephone.val() == '') {
            $(this).val("电话");
        }
        $(this).css("border-bottom-color", "#252525");
    })

    //内容焦点

    content.focus(function() {
        if (content.val() == "内容") {
            $(this).val("");
        } else if (content.val() == '') {
            $(this).val("内容");
        }
        $(this).css("border-bottom-color", "#484848");
    })
    content.blur(function() {
        if (content.val() == '') {
            $(this).val("内容");
        }
        $(this).css("border-bottom-color", "#252525");
    })

    //提交判断

    $(".main-5 .button").click(function() {
        var mailboxval = mailbox.val(); //邮箱值赋值
        var telephoneval = telephone.val(); //手机号码值赋值
        if (name.val() == "姓名") {
            alert("名字为空");
        } else if (mailbox.val() == "邮箱") {
            alert("邮箱为空");
        } else if (!mailboxval.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
            alert("邮箱格式错误")
        } else if (telephone.val() == "电话") {
            alert("电话为空");
        } else if (!telephoneval.match(/^(13|14|15|17|18)\d{9}$/)) {
            alert("电话格式错误")
        } else if (content.val() == "内容") {
            alert("内容为空");
        }
    })
})
